<template>
  <h3>{{ { myTotal, myPageSize, myCurrentPage, btnCount } }}</h3>
  <h2>计算出分页所需的数据：{{ pager }}</h2>
  <div class="xtx-pagination">
    <a href="javascript:;" :class="{disabled:myCurrentPage===1}" @click="pager.changePager(myCurrentPage-1)">上一页</a>
    <span>...</span>
    <a
      v-for="i in pager.btnArr"
      :key="i"
      :class="{ active: i === myCurrentPage }"
      @click="pager.changePager(i)"
      href="javascript:;"
    >
      {{ i }}
    </a>
    <span>...</span>
    <a href="javascript:;" :class="{disabled:myCurrentPage===pager.pageCount}" @click="pager.changePager(myCurrentPage+1)">下一页</a>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
/*
  分页器所需数据
    总条数 props
    当前页码
    页容量
    按钮个数

    分页信息（动态计算）
      总页数
      起始按钮
      结束按钮
      按钮数组（生成哪些编号）
*/
export default {
  name: 'XtxPagination',
  setup (props, { emit }) {
    // 总条数 - 最终应该是有父组件传递过来
    const myTotal = ref(101) // 测试数据：101  9
    // 页容量
    const myPageSize = ref(10)
    // 当前页码
    const myCurrentPage = ref(11) // 测试数据： 5  1  11
    // 按钮个数
    const btnCount = 5

    // 重点：根据上述数据得到（总页数，起始页码，结束页码，按钮数组）
    const pager = computed(() => {
      // 计算总页数
      const pageCount = Math.ceil(myTotal.value / myPageSize.value)

      // 计算起始按钮 - 要基于<当前页码>计算得到
      let start = myCurrentPage.value - Math.floor(btnCount / 2)
      if (myCurrentPage.value > pageCount) {
        start = pageCount
      }
      // 左按钮 边界问题 - 左边最小值为 1
      if (start < 1) { start = 1 }

      // 结束按钮 - 基于<起始按钮>计算得到
      let end = start + btnCount - 1
      // 右按钮 边界问题 - 右边最大值为总页数
      if (end > pageCount) {
        end = pageCount
        // 根据右边界算出来左边界，确保按钮还是 5 个
        start = pageCount - btnCount + 1
        // 同时考虑左按钮计算后的 左按钮 边界问题
        if (start < 1) { start = 1 }
      }

      const changePager = (page) => {
        // 限制最大最小页码 和 点击自身页码
        if (page < 1 || page > pageCount || myCurrentPage.value === page) return
        if (myCurrentPage.value !== page) {
          myCurrentPage.value = page
        }
        emit('current-change', page)
      }

      // 计算出按钮组 - 用于界面渲染
      const btnArr = []
      for (let i = start; i <= end; i++) {
        btnArr.push(i)
      }

      return {
        pageCount,
        start,
        end,
        btnArr,
        changePager
      }
    })

    return { myTotal, myPageSize, myCurrentPage, btnCount, pager }
  }
}
</script>

<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: @xtxColor;
    }
    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333;
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>
